<template>
	<view class="body">
		<view class="content">
		    <view class="name">
		    	<text>设备名称</text>
				<text class="msg">{{name}}</text>
		    </view>
			<view class="property" style="display: flex;">
				<view style="width: 25%;">设备所属</view>
				<view style="width: 70%;margin-left: 20upx;">{{nickname}}</view>
			</view>
			<view class="property" style="display: flex;">
				<view style="width: 25%;">设备级别</view>
				<!-- <text class="msg">一级</text> -->
				<view class="xqtext" v-if="type=='1'">
				    <view>一级</view>
				</view>
				<view class="xqtext" v-if="type=='2'">
				    <view>二级</view>
				</view>
				<view class="xqtext" v-if="type=='3'">
				    <view>三级</view>
				</view>
			</view>
			<view class="property">
				<text>巡检状态</text>
				<view class="butmsg">
					<view class="text" v-bind:class="{ butnormal: isActive1 }" @click="xuanzhon1">正常</view>
					<view class="text1" v-bind:class="{ butabnormal: isActive2 }" @click="xuanzhon2">异常</view>
					<view class="text1" v-bind:class="{ butfault: isActive3 }" @click="xuanzhon3">故障</view>
				</view>
			</view>
			<view class="property">
				<text>情况描述</text>
				<textarea v-model="wengti" class="liuyan" rows="3" cols="50" placeholder="请输入文字描述故障问题"></textarea>
			</view>
			<view class="faultimg">
				<text>故障图片</text>
				<view class="uptup">
					<view class="faultimg2">
					  <image :src="image1" class="imgsize" @click="chooseImage1"></image>
					</view>
					<view class="faultimg2">
					  <image class="imgsize" :src="image2" @click="chooseImage2" ></image>
					</view>
					<view class="faultimg2">
					  <image class="imgsize" :src="image3" @click="chooseImage3"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="upbutton">
			<button class="anniumsg" @click="tijiao">提交</button>
		</view>
	</view>
</template>

<script>
    export default {
		data() {			 
			return {
				isActive1:false,
				isActive2:false,
				isActive3:false,
				name:'',
				fimage:'',
				image1:'',
				image2:'',
				image3:'',
				dengji:'',
				shousu:'',
				wengti:'',
				status:'',
				img1:'',
				img2:'',
				img3:'',
				id:'',
				nickname:'',
				type:'',
				tempFilePaths1:'',
				tempFilePaths2:'',
				tempFilePaths3:'',
				detail:'',
				status1:'',
				image:''
			}
        },
        methods: {
			getData () {
				uni.request({
					url:'http://xj.gccrw.cn/api/app/xundetail',
					data:{
						id:this.id
					},
					method:'POST',
					success: (e) => {
						this.name = e.data.data.data.name;
						this.nickname = e.data.data.data.nickname;
						this.type = e.data.data.data.type;
					},
					fail:() => {
						uni.showToast({
							icon:'none',
							title:'请连接网络'
						})
					}
				})
			},
        	chooseImage1 () {
				uni.chooseImage({
				count: 1, 
				sizeType: ['original'], 
				sourceType: ['album','camera'],
				success:(res) => {
					console.log('-----123')
						const tempFilePaths  = res.tempFilePaths ;
						uni.uploadFile({
							url:'http://xj.gccrw.cn/api/user/uploadFile',
							filePath: tempFilePaths [0],
							name:'pic',
							data:{
								type:3,
								pic:tempFilePaths
							},
							method:'POST',
							success: (ret) => {
								console.log('------1122321',JSON.parse(ret.data));
								this.image1 = JSON.parse(ret.data)
							}
						})
					}
				})
        	},
			chooseImage2 () {
				uni.chooseImage({
				count: 1, 
				sizeType: ['original'], 
				sourceType: ['album','camera'],
				success:(res) => {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url:'http://xj.gccrw.cn/api/user/uploadFile',
							filePath: tempFilePaths[0],
							name:'pic',
							data:{
								type:3,
								pic:tempFilePaths
							},
							method:'POST',
							success: (ret) => {
								this.image2 = JSON.parse(ret.data)
							}
						})
					}
				})
			},
			chooseImage3 () {
				uni.chooseImage({
				count: 1, 
				sizeType: ['original'], 
				sourceType: ['album','camera'],
				success:(res) => {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url:'http://xj.gccrw.cn/api/user/uploadFile',
							filePath: tempFilePaths[0],
							name:'pic',
							data:{
								type:3,
								pic:tempFilePaths
							},
							method:'POST',
							success: (ret) => {
								this.image3 = JSON.parse(ret.data)
							}
						})
					}
				})
			},
			tijiao () {
				uni.request({
					url: 'http://xj.gccrw.cn/api/app/inputXj', 
					data: {
						equip_id:this.id,
						detail:this.wengti,
						status:this.status1,
						uid:uni.getStorageSync('uid'),
						img1:this.image1,
						img2:this.image2,
						img3:this.image3
					},
					method: "POST",
					success: (res) => {
						if(this.status1 == 1){
							console.log('---00')
							uni.navigateBack({
								delta:1,
								success:(res) => {
									uni.showToast({
										title:'添加成功'
									})
								}
							})
						}else{
							console.log('---11')
							if (this.detail == this.wengti){
								console.log('---22')
								uni.showModal({
									title:'故障信息',
									content:'问题描述'
								})
							}else if(this.img1 == this.image1){
								uni.showModal({
									title:'故障图片',
									content:'请选择图片'
								})
							}
							else{
								console.log('---33')
								uni.navigateBack({
									delta:1,
									success:(res) => {
										uni.showToast({
											title:'添加成功'
										})
									}
								})
							}
						} 
					}
				})
			},
			xuanzhon1 () {
				uni.request({
					url: 'http://xj.gccrw.cn/api/Set/connect', 
					method: "POST",
					success: (res) => {
						this.isActive1 = true;
						this.isActive2 = false;
						this.isActive3 = false;
						this.status1 = 1
					}
				})
			},
			xuanzhon2 () {
				uni.request({
					url: 'http://xj.gccrw.cn/api/Set/connect', 
					method: "POST",
					success: (res) => {
						this.isActive1 = false;
						this.isActive2 = true;
						this.isActive3 = false;
						this.status1 = 2
					}
				})
			},
			xuanzhon3 () {
				uni.request({
					url: 'http://xj.gccrw.cn/api/Set/connect', 
					method: "POST",
					success: (res) => {
						this.isActive1 = false;
						this.isActive2 = false;
						this.isActive3 = true;
						this.status1 = 3
					}
				})
			}
        },
		 onLoad(e) {
			 this.id = e.id;
        },
		onShow() {
			this.getData()
		}
    }
</script>

<style>
	
.name{
	margin-top: 30upx;
	margin: 10upx;
}

.property {
	margin: 10upx;
}
.faultimg2 {
	display: flex;
	background-color: #EEEEEE;
	margin: 15upx;
	position: relative;
	border-radius: 15upx;
}
.faultimg2::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90upx;
  margin-left: -45upx;
  margin-top: -2upx;
  border: 5upx solid #FFFFFF;
  text-align: center;
}
.faultimg2::after {
 content: '';
 position: absolute;
 left: 50%;
 top: 50%;
 height: 90upx;
 margin-left: -2upx;
 margin-top: -45upx;
 border: 5upx solid #FFFFFF;
 text-align: center;
}
.uptup {
	display: flex;
}
.item {
	position: absolute;
	margin-left: 180upx;
}
.faultmsg2 {
	width: 100%;
}
.msg {
	margin-left: 40upx;
}
.liuyan{
	width: 94%;
	padding: 20upx;
	background-color: #EEEEEE;
	margin-top: 20upx;
	border-radius: 15upx;
}
.butmsg {
	margin-top: 20upx;
	display: flex;
	justify-content: flex-start;
}
.text {
	width: 170upx;
	height: 60upx;
	border-radius: 23upx;
	border: 2upx solid #EEEEEE;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #999999;
}
.text1 {
	width: 170upx;
	height: 60upx;
	border-radius: 23upx;
	border: 2upx solid #EEEEEE;
	margin-left: 50upx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #999999;
}
.butnormal {
	width: 170upx;
	height: 60upx;
	background-color: #2EC13C;
	border-radius: 23upx;
	text-align: center;
	color: #FFFFFF;
}
.butabnormal {
	width: 170upx;
	height: 60upx;
	background-color: #FFD200;
	border-radius: 23upx;
	text-align: center;
	color: #FFFFFF;
}
.butfault {
	width: 170upx;
	height: 60upx;
	background-color: #FD0006;
	border-radius: 23upx;
	text-align: center;
	color: #FFFFFF;
}
.imgsize {
	width: 130upx;
	height: 130upx;
	z-index: 9999;
}
.xqtext {
	margin-left: 20upx;
	font-size: 40upx;
	width: 70%;
}
.nublable {
	padding: 10upx;
	color: #999999;
	display: flex;
	justify-content: center;
}
.upbutton {
	width: 100%;
	margin-top: 10upx;
}
.anniumsg {
	color: #FFFFFF;
	text-align: center;
	background-color: #3C6DD2;
	/* padding: 20upx;
	margin-top: 16%; */
}




.upload-image-view {
	width: 100%;
	margin: 20upx 0 20upx 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

</style>
